<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
    div{
        width: 100px;height: 100px;
    }
    #div1{
       background-color : hotpink;
    }

    #div2{
        background-color: blue;
    }


</style>
</head>
<body>
    
<h3>hide和show 的动画方法是从左上角收起和展开的</h3>


  <div id="div1"></div>
  <div id="div2"></div>


<script type="text/javascript">

$(function(){
    $('#div1').hover(   // toggle事件
        function(){
            // $("#div1").html("移入")
            // $("#div2").hide(2000,function(){  //hide隐藏方法，可传参。
            // $("#div2").slideUp(2000,function(){  //slideUp卷帘隐藏方法，移入触发
         /*    $("#div2").fadeOut(2000,function(){  //fadeOut ，out为隐藏，移入触发
                $('#div1').html("移入")
            })
 */
            
            $("#div2").fadeTo(2000,0.5,function(){//第二个参数，移入时变为0.5透明度
                $('#div1').html("移入")
            })

        },
        function(){
            // $("#div1").html("移出")
            // $("#div2").show(2000,function(){
            // $("#div2").slideDown(2000,function(){
          /*   $("#div2").fadeIn(2000,function(){//fade为透明度的改变
                $('#div1').html("移出")
            }) */

            $("#div2").fadeTo(2000,.5,function(){//内嵌函数，#div2完成后#div1在执行，按顺序执行
                $('#div1').html("移出")
            })


        }
    )


 
})


</script>


</body>
</html>